﻿<!DOCTYPE html>
<html>
<head>
    <title>A escassez de água no Sudeste</title>
   	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="comum/css/themes/default/jquery.mobile-1.3.1.css" type="text/css" />

 
    <link rel="stylesheet" href="comum/css/global.css">
    <link rel="stylesheet" href="css/comum.css">
    <link rel="stylesheet" href="fonts/fontes.css">
    <link rel="stylesheet" href="css/grid_padrao.css">
    <link rel="stylesheet" href="css/abertura.css">
    <link rel="stylesheet" href="css/menu.css">
    <link rel="stylesheet" href="img/ui/sprites.css">
    <link rel="stylesheet" href="css/idangerous.swiper.css">
    <link rel="stylesheet" href="css/framework.css">

    <link rel="stylesheet" href="css/style.css?v=1.8">
    <link rel="stylesheet" href="css/swiper-demos.css?v=1.8">


    <script src="comum/js/jquery-1.9.1.js"></script>
    <script src="comum/js/jquery.mobile-1.3.1.js"></script>
    <script src="legenda.js"></script>
	<script src="js/PxLoader.js"></script>
	<script src="js/PxLoaderAudio.js"></script>
	
    <script src="js/PxLoaderImage.js"></script>
	<script src="js/PxLoaderVideo.js"></script>

    <script src="comum/js/plugins/CSSPlugin.min.js"></script>
    <script src="comum/js/easing/EasePack.min.js"></script>
    <script src="comum/js/TweenLite.min.js"></script>
    <script src="comum/js/jquery.gsap.min.js"></script>
    <script src="comum/js/jquery-ui.js"></script>
    <script src="comum/js/jquery.ui.touch-punch.js"></script>
    <script src="js/define_grid.js"></script>
    <script src="js/jogo.js"></script>
    <script src="config.js"></script>
    <!-- TEXTOS-->
  

    <!-- ADICIONAR OS SCRIPTS DA PEÇA NO FINAL DO BODY, abaixo do comum -->
</head>

<body>
    <!-- DIV para separar os audios e conseguir compactar -->
    <div id="base">
    
    <div id="preloader">
    	<img src="img/ajax-loader.gif"/> 
    	<div id="pct"></div>

    </div>
    <div id="fadePause"></div>

        <audio preload="none" id="audVideo">
            <source src="audio/Bt_video.mp3" type="audio/mpeg">
            <source src="audio/Bt_video.ogg" type="audio/ogg">
            <source src="audio/Bt_video.m4a" type="audio/mp4">
            Your browser does not support the audio element.
        </audio>

        <audio preload="none" id="audInicio">
            <source src="audio/Inicio1.mp3" type="audio/mpeg">
            <source src="audio/Inicio1.ogg" type="audio/ogg">
            <source src="audio/Inicio1.m4a" type="audio/mp4">
            Your browser does not support the audio element.
        </audio>

        <audio preload="none" id="audEsquerda">
            <source src="audio/SetaJornalEsquerda.mp3" type="audio/mpeg">
            <source src="audio/SetaJornalEsquerda.ogg" type="audio/ogg">
            <source src="audio/SetaJornalEsquerda.m4a" type="audio/mp4">
            Your browser does not support the audio element.
        </audio>

        <audio preload="none" id="audDireita">
            <source src="audio/SetasJornalDireita.mp3" type="audio/mpeg">
            <source src="audio/SetasJornalDireita.ogg" type="audio/ogg">
            <source src="audio/SetasJornalDireita.m4a" type="audio/mp4">
            Your browser does not support the audio element.
        </audio>

        <video id="video1pagina6">
            <source src="video/video_demo.mp4" type="video/mp4">
            <!--<source src="video/video1pagina6.ogv" type="video/ogg">-->
            Your browser does not support the video tag.
        </video>


    </div>

    <div id="legenda">
        <p>
          Legenda teste
        </p>
    </div>

    <div class="base">

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
        <!-- Abertura -->
        <div data-role="page" id="pagina0" class="pages">
            <div data-role="content">
                <div id="imagemFundoCapa"></div>
                <div id="imagemPg0"></div>
                <a href="#pagina1" style="z-index: 3;">
                    <div id="btIniciar" style="z-index: 3;"></div>
                </a>
            </div>
            <div id="bgBaixoAbertura"/></div>
        </div>

        <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
        <!-- pagina1 -->
        <!--<div class="pages">-->
        <div data-role="page" id="pagina1" class="pages">
            <div id="bgPg1"/></div>
            <div id="imagemPg1"/></div>
            <div id="tipOed"/></div>
            <div id="tituloPg1" class="titulos tituloPg">Sem Título</div>
            <div id="texto1Pg1" class="textos texto1Pg">Sem Texto1</div>
            <div id="texto2Pg1" class="textos texto2Pg">Sem Texto2</div>
        </div>

        <!-- pagina2 -->
        <div data-role="page" id="pagina2" class="pages">
            <div id="bgPg2"/></div>
            <div id="imagemPg2"/></div>
            <div id="tipOed"/></div>
            <div id="tituloPg2" class="titulos tituloPg">Sem Título</div>
            <div id="texto1Pg2" class="textos texto1Pg">Sem Texto1</div>
            <div id="texto2Pg2" class="textos texto2Pg">Sem Texto2</div>
        </div>

        <!-- pagina3 -->
        <div data-role="page" id="pagina3" class="pages">
            <div id="bgPg3"/></div>
            <div id="imagemPg3" class="imagemPagina"></div>
            <div id="tipOed"/></div>
            <div id="tituloPg3" class="titulos tituloPg">Sem Título</div>
            <div id="texto1Pg3" class="textos texto1Pg">Sem Texto1</div>
            <div id="texto2Pg3" class="textos texto2Pg">Sem Texto2</div>
        </div>

        <!-- pagina4 -->
        <div data-role="page" id="pagina4" class="pages">
            <div id="bgPg4"/></div>
            <div id="imagemPg4" class="imagemPagina"></div>
            <div id="tipOed"/></div>
            <div id="tituloPg4" class="titulos tituloPg">Sem Título</div>
            <div id="texto1Pg4" class="textos texto1Pg">Sem Texto1</div>
            <div id="texto2Pg4" class="textos texto2Pg">Sem Texto2</div>
          </div>
        <!-- pagina5 -->
        <div data-role="page" id="pagina5" class="pages">
             <div id="bgPg5"/></div>
            <div id="imagemPg5" class="imagemPagina"></div>
            <div id="tipOed"/></div>
            <div id="tituloPg5" class="titulos tituloPg">Sem Título</div>
            <div id="texto1Pg5" class="textos texto1Pg">Sem Texto1</div>
            <div id="texto2Pg5" class="textos texto2Pg">Sem Texto2</div>
         </div>        
         <!-- pagina6 -->       
        <div data-role="page" id="pagina6" class="pages">
            <div id="bgPg6"/></div>            
            <div id="imagemPg6" class="imagemPagina"></div>
            <div id="tipOed"/></div>
            <div id="tituloPg6" class="titulos tituloPg">Sem Título</div>
            <div id="texto1Pg6" class="textos texto1Pg">Sem Texto1></div>
            <div id="texto2Pg6" class="textos texto2Pg">Sem Texto2</div>
          <!-- pagina7 --> 
        </div>

        <div data-role="page" id="pagina7">
            <div id="bgPg7"/></div>            
            <div id="imagemPg7" class="imagemPagina"></div>
            <div id="tipOed"/></div>
            <div id="tituloPg7" class="titulos tituloPg">Página Final</div>
            <div id="texto1Pg7" class="textos texto1Pg">Sem Texto1></div>
            <div id="texto2Pg7" class="textos texto2Pg">Sem Texto2</div>
          </div>
    </div>

        <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
  
        
      
        <div id="bgBaixo"></div>

        
        <!-- menu -->
        
        <!-- <div class="menu">
            <a href="#">
                    <div id="icoPg1"></div>
            </a>
            <a href="#">
                    <div id="icoPg2"></div>
            </a>
            <a href="#">
                    <div id="icoPg3"></div>
            </a>
            <a href="#">
                    <div id="icoPg4"></div>
            </a>
            <a href="#">
                    <div id="icoPg5"></div>
            </a>
            <a href="#">
                    <div id="icoPg6"></div>
            </a>
            <a href="#">
                    <div id="icoPg7"></div>
            </a>
        </div> -->

        <div class="setasPaginacao">
            <a href="#">
                    <div id="setinhasEsquerda"></div>
            </a>
            <a href="#">
                    <div id="setinhasDireita"></div>
            </a>
        </div>  

        <div Id="feedbackPositivo" class="Feedbacks"/>
        <div id="bgPgPositivo"/></div>
        <div id="btVoltar1" class="btVoltar" style="z-index: 3;"></div>
        <div id="tituloPgPositivo" class="titulos tituloPg">Tem certeza?</div>
        <div id="texto1PgPositivo" class="textos texto1Pg">Você ainda não analisou todas as possibilidade, vamos ver a outra?</div>
        </div>

        <div Id="feedbackNegativo" class="Feedbacks"/>
        <div id="bgPgNegativo"/></div>
        <div id="btVoltar2" class="btVoltar" style="z-index: 3;"></div>
        <div id="tituloPgNegativo" class="titulos tituloPg">Muito bem!</div>
        <div id="texto1PgNegativo" class="textos texto1Pg">Você analisou bem as 2 possibilidades e respondeu adequadamente</div>

        </div>
        <div id="controles">
            <div id="pauseTween" class ="btControles"> <img src="img/pause.png"/></div>
        </div>
    </div>

	<!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - -->


	<script type="text/javascript">
        $(".base").css('position', 'relative');
    </script>
	<script src="js/framework.js"></script> 
    <script src="js/comum.js"></script>
    <script src="js/abertura.js"></script>
    <script src="js/pagina01.js"></script>
    <script src="js/pagina02.js"></script>
    <script src="js/pagina03.js"></script>
    <script src="js/pagina04.js"></script>
    <script src="js/pagina05.js"></script>
    <script src="js/pagina06.js"></script> 
    <script src="js/pagina07.js"></script>    

</body>
</html>
/html>
 - - - - - - - - - - - - - -  - - - - - - - - - - -->

<script type="text/javascript">

DoResize();
window.addEventListener("resize", DoResize, true);
 function DoResize(){
    var ViewP = document.getElementsByTagName('html')[0],
      heigthView = window.innerHeight,
      widthView = window.innerWidth,
      factorView = Math.min(heigthView/768,widthView/1024);
    ViewP.style.webkitTransform ='scale('+factorView+')';
    ViewP.style.transform = 'scale('+factorView+')';
    window.focus();
  }
</script>

    <!-- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - - - - -->

	<script type="text/javascript">
        $(".base").css('position', 'relative');
        /*$(document).bind("contextmenu",function(e) {
            e.preventDefault();
        });*/
    </script>
	
    <script src="js/comum.js"></script>
    <script src="js/abertura.js"></script>
    <script src="js/pagina01.js"></script>
    <script src="js/pagina02.js"></script>
    <script src="js/pagina03.js"></script>
    <script src="js/pagina04.js"></script>
    <script src="js/pagina05.js"></script>
    <script src="js/pagina06.js"></script> 
    <script src="js/pagina07.js"></script>    

</body>
</html>
